<template>
  <div class="combination-add-page app-container">
    <el-steps style="width: 960px;margin: 0 auto 30px;" :active="active" align-center>
      <el-step title="创建组合"></el-step>
      <el-step title="模型配置"></el-step>
      <el-step title="选择方案(MVO/RP)"></el-step>
      <el-step title="回测优化"></el-step>
      <el-step title="保存方案"></el-step>
    </el-steps>
    <chunk1 v-show="active==0" :key="key_chunk1+'chunk1'" :chunk1_res.sync="chunk1_res" @newMakeTime="newMakeTime" :deleteIndex="deleteIndex"></chunk1>
    <chunk2 ref="chunk2" v-show="active==1" :key="key_chunk2+'chunk2'" @modelChange="modelChangeHandle"
      @baseChange="baseContrast" @startMoneyChange="startMoneyChange" :chunk1_res.sync="chunk1_res"
      @weightChange="weightHandleChange" @haveWeightChange="haveWeightHandleChange" :deleteIndex.sync="deleteIndex">
    </chunk2>
    <chunk3 ref="chunk3" v-if="active==2" :key="key_chunk3+'chunk3'" :chunk1_res="chunk1_res" :chunk3_data="chunk3_data" :base_contrast_name="base_contrast_name" :base_contrast="base_contrast" :userId="userId" :strategyId="strategyId" :startTime="startTime"></chunk3>
    <chunk4 v-if="active==3" :key="key_chunk4+'chunk4'" :userId="userId" :strategyId="strategyId" :base_contrast="base_contrast" :startTime="startTime" @enterTime="enterTimeHandle"></chunk4>
    <chunk5 ref="chunk5" v-show="active==4" :key="key_chunk5+'chunk5'" :chunk1_res="chunk1_res" :portfolioId="strategyId" :base_contrast="base_contrast" :model="model" 
      :userId="userId" :weights="weights" :enterTime="enterTime" :startMoney="startMoney">
    </chunk5>
    <div class="footer">
      <el-button v-show="active>0" @click="topHandle">{{ topTxt }}</el-button>
      <el-button type="primary" @click="bottomHandle">{{ bottomTxt }}</el-button>
    </div>
  </div>
</template> 

<script>
import chunk1 from './chunk1.vue'
import chunk2 from './chunk2.vue'
import chunk3 from './chunk3.vue'
import chunk4 from './chunk4.vue'
import chunk5 from './chunk5.vue'
import { portfolio, riskParityPortfolio } from '@/api/combination'
import { mapGetters } from 'vuex'

export default {
  name: 'CombinationAdd',
  components: { chunk1, chunk2, chunk3, chunk4, chunk5 },
  data() {
    return {
      key_chunk1: 0,
      key_chunk2: 0,
      key_chunk3: 0,
      key_chunk4: 0,
      key_chunk5: 0,

      active: 0,
      topTxt: '上一步',
      bottomTxt: '下一步',

      strategyId: '',

      // chunk1
      chunk1_res: [],
      startTime: '',

      // chunk2
      base_contrast: 9,
      base_contrast_name: '沪深300',
      startMoney: undefined,
      model: { id: 0, name: '等权重' },
      portfolioId: null, // 组合ID，初始传空
      weights: [],
      have_weight: 0,
      deleteIndex: null,

      // chunk3
      chunk3_data: {},

      // chunk4
      enterTime: ''
    }
  },
  computed: {
    ...mapGetters([
      'userId'
    ])
  },
  methods: {
    enterTimeHandle(val) {
      this.enterTime = val
    },
    newMakeTime(val) {
      this.startTime = val
    },
    startMoneyChange(val) {
      this.startMoney = val
    },
    weightHandleChange(val) {
      this.weights = val
    },
    haveWeightHandleChange(val) {
      this.have_weight = val
    },
    baseContrast(val) {
      this.base_contrast = val.id
      this.base_contrast_name = val.name
    },
    modelChangeHandle(val) {
      this.model = val
    },
    topHandle() {
      if(this.model.id==0&&this.active==3) {
        this.active -= 2
        this[`key_chunk${this.active+1}`]++
      }else if(this.active>0) {
        this.active--
        if(this.active>1) this[`key_chunk${this.active+1}`]++
      }
      if(this.active<4) {
        this.bottomTxt = '下一步'
      }
    },
    bottomHandle() {
      switch (this.active) {
        case 0:
          if(this.chunk1_res.length<2) {
            this.$message({
              message: '至少添加两个以上产品！',
              type: 'warning'
            })
            return
          }
          this.deleteIndex = null
          this.active++
          this.key_chunk2++
          break
        case 1:
          if(this.model.id) {
            let tag = false
            this.$refs.chunk2.tableRiskData.forEach(element => {
              if(element.annualFluctuations) tag = true
            })
            if(!tag) {
              this.$message({
                message: '预期年化波动率不能全部为0',
                type: 'warning'
              })
              return
            }
            riskParityPortfolio(this.$refs.chunk2.tableRiskData).then(res => {
              this.chunk3_data = res
              this.active++
              this.key_chunk3++
            })
          }else {
            portfolio({
              strategyIds: this.chunk1_res,
              portfolioId: this.portfolioId,
              portfolioCompareIndex: this.base_contrast,
              portfolioModelId: this.model.id+1,
              portfolioInitMoney: this.startMoney,
              portfolioModelName: this.model.name,
              userId: this.userId,
              weights: this.weights
            }).then(res => {
              this.strategyId = res.body.strategyId
              this.active += 2
              this.key_chunk4++
            })
          }
          break
        case 2:
          this.weights = this.$refs.chunk3.weight_list.map(item => item.weight)
          portfolio({
            strategyIds: this.chunk1_res,
            portfolioId: this.portfolioId,
            portfolioCompareIndex: this.base_contrast,
            portfolioModelId: this.model.id+1,
            portfolioInitMoney: this.startMoney,
            portfolioModelName: this.model.name,
            userId: this.userId,
            weights: this.weights,
            yearIncomRate: this.chunk3_data.yearIncom,
            yearVolityRate: this.chunk3_data.yearVolity
          }).then(res => {
            this.strategyId = res.body.strategyId
            this.active++
            this.key_chunk4++
          })
          break
        case 3:
          this.active++
          this.bottomTxt = '完成'
          this.key_chunk5++
          break
        case 4:
          this.$refs.chunk5.savePortfolioStrategy(this.$refs.chunk2.tableRiskData)
          break
        default: break
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.combination-add-page {
  ::v-deep .el-steps {
    .el-step__title {
      font-size: 14px;
    }
  }
  .footer {
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
}
</style>

